<template>
    <p>上来黑屏别慌，是因为官网视频太大，带宽太小，要加载很久，换成自己服务器视频秒加载 ！！！</p>

    <p>手机测试直接用ip+端口访问即可，注意同一个wifi下，或者用vscode运行后，打开终端中的Network访问</p>

    <p><button @click="goLocality">或者点击访问本地版locality.vue</button></p>

    <canvas id="canvas"></canvas>
</template>
  
<!-- 设置name -->
<script>
export default {
    name: 'vue3-h5-video-auto'
}
</script>
<!-- 主逻辑代码 -->
<script setup>
import { ref , onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { JSMpeg } from "@/assets/jsmpeg.min.js"
const router = useRouter()
const v1 = ref('')
const goLocality = () => {
    router.push({
        path: '/locality'
    })
}
onMounted(() => {
    console.log(JSMpeg)
    const canvas = document.querySelector('#canvas');
    // https://jsmpeg.com/bjork-all-is-full-of-love.ts 服务器视频1
    // https://jsmpeg.com/blade-runner-2049-360p.ts 服务器视频2
    // 注意这里需要将video.mp4转换成ts格式的文件数据转换格式必须是MPEG-1才能生效，转化网址：https://convertio.co/zh/mp4-ts/ 
    // 读取服务器视频情况下，本地会跨域需要设置vue.config.js
    const player = new JSMpeg.Player('/video/blade-runner-2049-360p.ts', { 
        canvas: canvas, 
        loop: true, 
        autoplay: false, 
        audio: true,
        throttled: false, // 这里设置为false，不然不触发onSourceCompleted事件
        onSourceCompleted: () => {
            console.log('completed')
        },
        onPlay: () => {
            console.log('play')
        },
        onPause: () => {
            console.log('pause')
        },
        onEnded: () => {
            console.log('end')
        },
        onStalled: (e) => {
            console.log('没有足够的数据用于播放',e)
        },
        onSourceEstablished: (e) => {
            console.log('第一次收到数据',e)
        },
        // 如果卡顿就设置大点
        chunkSize: 4 * 1024 * 1024, // 使用分块加载数据时，一次加载的块大小。默认1024*1024(1mb)
        progressive: true, // 是否分块加载数据
    });
    // 解锁声音 - 不设置也会自动监听
    player.audioOut.unlock(() => {
        player.volume = 1;
    });

    // 播放
    player.play(); 

    // 销毁视频
    // player.destroy()
    
    // 点击启停
    canvas.addEventListener('click', function(){
        if (player.isPlaying) {
                player.pause();
        } else {
            player.play();
        }
    })
})
</script>

<style lang="less" scoped>
#canvas{
    width: 100vw;
    height: 300px;
}
</style>